<template>
    <h2 style="text-align: center;">房号列表</h2>
    <a href="/AddRoomNum" class="btn btn-success">添加房号信息</a><br>
    门店名称:<select v-model="Shop_Id" style="margin-right: 10px;">
                <option :value="-1">请选择</option>
                <option v-for="item in InfoShop" :value="item.Shop_Id">{{ item.Shop_Name }}</option>
            </select>
    房型名称: <select v-model="RoomType_Id" style="margin-right: 10px;">
                <option :value="-1">请选择</option>
                <option v-for="item in InfoType" :value="item.RoomType_Id">{{ item.RoomType_Name }}</option>
            </select>
    <input type="button" value="查询" class="btn btn-success" @click="ShowRoomNum"  style="margin-right: 10px;" />
    <input type="button" value="导出房号信息" class="btn btn-success" @click="ExprotFile"  style="margin-right: 10px;"/>
    <input type="button" value="导入房号信息" class="btn btn-success" @click="ImprotFile"  style="margin-right: 10px;"/>
    <table border="1" class="table table-bordered">
        <thead style="background-color: aquamarine;">
            <tr style="text-align: center;">
                <th>房号编号</th>
                <th>门店名称</th>
                <th>房型名称</th>
                <th>房号名称</th>
                <th>房号状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody  style="text-align: center;">
            <tr v-for="itme in Info">
                <td>{{ itme.RoomNum_Id }}</td>
                <td>{{ itme.Shop_Name }}</td>
                <td>{{ itme.RoomType_Name }}</td>
                <td>{{ itme.RoomNum_Name }}</td>
                <td>{{ itme.RoomNum_State?"上架":"下架"}}</td>
                <td>
                    <a @click="UpdNumStae(itme.RoomNum_Id)" class="btn btn-success" style="margin-right: 10px;">修改状态</a>
                    <a @click="DelNumStae(itme.RoomNum_Id)" class="btn btn-danger" style="margin-right: 10px;">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios, { all } from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();

    //显示响应式数据
    const Info=ref([{
        RoomNum_Id: 0,
        RoomNum_Name: "",
        RoomType_Id: -1,
        RoomType_Name: "",
        Shop_Id: -1,
        Shop_Name: "",
        RoomNum_State: true,
    }])
    ///获取门店信息
    const InfoShop=ref([{
        Shop_Id: 0,
        Shop_Name: ""
    }])
    ///获取房型信息
    const InfoType=ref([{
        RoomType_Id: 0,
        RoomType_Name: ""
    }])
    onMounted(()=>{
        GetRoomTypes();//获取房型信息
        GetShop();//获取门店信息
        ShowRoomNum();//显示
    })
    //获取房型信息
    const GetRoomTypes=()=>{
        axios.get("https://localhost:44380/api/RoomPrice/GetRoomTypes")
        .then(res=>{
            InfoType.value=res.data
        })
    }
    //获取房型信息
    const GetShop=()=>{
        axios.get("https://localhost:44380/api/RoomNum/GetShop")
        .then(res=>{
            InfoShop.value=res.data
        })
    }
    //显示
    const Shop_Id=ref(-1);
    const RoomType_Id=ref(-1);
    const ShowRoomNum=()=>{
        axios.get("https://localhost:44380/api/RoomNum/ShowRoomNum",
            {
                params:{
                    Shop_Id:Shop_Id.value,
                    RoomType_Id:RoomType_Id.value
                }
            }
        )
        .then(res=>{
            Info.value=res.data
        })
    }
    //修改状态
    const UpdNumStae=(RoomNum_Id:number)=>{
        if(confirm("确定修改?")){
            axios.put("https://localhost:44380/api/RoomNum/UpdNumStae?id="+RoomNum_Id)
            .then(res=>{
                if(res.data>0)
                {
                    alert('修改成功');
                    ShowRoomNum();//跳转到显示页面
                }
                else
                {
                    alert('修改失败');
                }
            })
        }
    }
    
     //逻辑删除
     const DelNumStae=(RoomNum_Id:number)=>{
        if(confirm("确定删除？")){
            axios.delete("https://localhost:44380/api/RoomNum/DelRoomNum?id="+RoomNum_Id)
            .then(res=>{
                if(res.data>0)
                {
                    alert('删除成功');
                    ShowRoomNum();//跳转到显示页面
                }
                else
                {
                    alert('删除失败');
                }
            })
        }
    }
    //导出
    const ExprotFile=()=>{
        axios.post("https://localhost:44380/api/RoomNum/ExprotFile?FPath="+"E://桌面/月考复习/第七套/RoomNumInfo.xlsx")
        .then(res=>{
            if(res.data>0)
            {
                alert('房号信息导出成功');
            }
            else
            {
                alert('房号信息导出失败');
            }
        })
    }

    //导入
    const ImprotFile=()=>{
        axios.post("https://localhost:44380/api/RoomNum/ImprotFile?FPath="+"E://桌面/月考复习/第七套/RoomNumInfo.xlsx")
        .then(res=>{
            if(res.data>0)
            {
                alert('房号信息导入成功');
                ShowRoomNum();//跳转到显示页面
            }
            else
            {
                alert('房号信息导入失败');
            }
        })
    }
</script>